CSS Master by Tiffany B. Brown

Author:Tiffany B. Brown [Brown, Tiffany B.]
Language: eng
Format: epub, mobi
ISBN: 9780994182623
Publisher: SitePoint Pty. Ltd.
Published: 2015-08-16T04:00:00+00:00

Note: Lacking confidence with JavaScript?

If any of that went over your head, don’t worry. Web Platform Docs explains these concepts in its guide to programming basics, or pick up Darren Jones’ JavaScript: Novice to Ninja. Using jQuery? Try the jQuery Learning Center.

Now let’s look at our CSS. It’s only a few lines long:

body { background: #fcf; transition: 5s; } .change { background: #0cf; }

Here we’ve defined a starting background color for our body element, and a transition. We’ve also defined a .change class, which has a different value for background. When our event handler runs, it will add the change class to our body element. This will trigger a transition from the original background color to the one defined in the .change declaration block, as shown in Figure 5.3.

If you want a transition to work in both directions—for example, when the class is both added and removed—you should add it to whichever declaration block is your start state. We’ve done that here by including the transition property in the body declaration block. If we moved the transition to the change class, our transition would only work when change was added to our body element, but not when it was removed.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.